<template>
	<statusBarVue title="我的卡片" :isShowBar="true" :isShowLeft="true" :isMyBgi="true" />
	<view class="bankcards-page" :style="pageHaveBarStyle">
		<view class="bankcards-page-group">
			<uni-swipe-action ref="swipeAction">
				<view class="bankcards-page-item" @click="handleCard(v)" v-for="(v,i) in bankCardsList"
					:key="'bank-cards'+i">
					<uni-swipe-action-item :right-options="optionsRight" @click="handleDelBankcard(v.id)">
						<view class="bank-name">
							{{ v.bank }}
						</view>
						<view class="bankcards-number">
							{{ toolBankCarkNum(v.account) }}
						</view>
					</uni-swipe-action-item>
				</view>
			</uni-swipe-action>
		</view>
		<view class="bankcards-page-group  add-btns">
			<button style="color:#ffffff;backgroundColor:#22A366;" @click="handleCard(undefined)">添加银行卡</button>
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';

	import {
		getBankcardsList,
		postDelBankcards
	} from '@/utils/api.js'

	import {
		publics
	} from '@/mixins/publics.js';

	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			return {
				optionsRight: [{
					text: '删除',
					style: {
						backgroundColor: '#ff3f3f'
					}
				}],
				bankCardsList: []
			}
		},
		onShow() {
			this.getBankcardsListApi();
		},
		methods: {
			// 查询列表
			getBankcardsListApi() {
				this.$refs.swipeAction.closeAll();
				getBankcardsList().then(req => {
					if (req.code === 200) {
						this.bankCardsList = req.data.preferences;
					}
				});
			},

			// 删除请求
			postDelBankcardsApi(id) {
				postDelBankcards(id).then(res => {
					if (res.code === 200) {
						this.getBankcardsListApi();
					}
				})
			},


			// 删除
			handleDelBankcard(id) {
				uni.showModal({
					title: '提示',
					content: '您确定要删除此银行卡吗？',
					success: (res) => {
						if (res.confirm) {
							this.postDelBankcardsApi(id)
						}
					}
				});
			},

			// 卡号加密
			toolBankCarkNum(cardNumber) {
				cardNumber = cardNumber.toString();
				let n_num = "";
				n_num = cardNumber.slice(0, -4).replace(/./g, '*') + cardNumber.slice(-4);
				n_num = n_num.match(/.{1,4}/g).join(" ");
				return n_num;
			},

			// 添加银行卡
			handleCard(item) {
				const str = JSON.stringify(item);
				uni.navigateTo({
					url: str ? `/myPages/bankcards/add?str=${str}` : `/myPages/bankcards/add`
				});
			}
		}
	}
</script>

<style lang="scss">
	.bankcards-page {
		position: fixed;
		left: 0;
		right: 0;
		background-color: #F2F3F7;
		padding: 10px 0;
		box-sizing: border-box;
		z-index: 99;

		&-group {
			width: 94.67vw;
			margin: auto;

			.bankcards-page-item {
				width: 94.67vw;
				margin: auto;
				border-radius: 12px;
				background-color: #4fd093;
				color: #fff;
				padding: 12px 18px;
				font-weight: bold;
				box-sizing: border-box;
				margin-bottom: 12px;

				.bank-name {
					font-size: 18px;
					margin-bottom: 20px;
					letter-spacing: 1px;
				}

				.bankcards-number {
					font-size: 22px;
				}
			}
		}
	}
</style>